<template>
  <div class="mechanism">
    <div class="group">
      <div class="group-left">
        <div class="g-l-item">
          <p>累计预约次数</p>
          <h2>{{totalCounts.appoTotal}}</h2>
        </div>
        <div class="g-l-item">
          <p>实际赴约次数</p>
          <h2>{{totalCounts.keepAppoCount}}</h2>
        </div>
      </div>
      <div class="group-right">
        <div class="group2">
          <p class="publicTitle">昨日预约</p>
          <p class="pubNumber">{{yesterdayCount.appoTotal}}</p>
          <div class="prossGroup">
            <span>赴约率</span>
            <div class="progss">
              <el-progress :percentage="yesterdayCount.keepAppoPer" :stroke-width="6"></el-progress>
            </div>
          </div>
        </div>
        <div class="group3">
          <p class="publicTitle">今日预约</p>
          <p class="pubNumber">{{todayCount.appoTotal}}</p>
          <div class="prossGroup">
            <span>赴约率</span>
            <div class="progss">
              <el-progress :percentage="todayCount.keepAppoPer" :stroke-width="6"></el-progress>
            </div>
          </div>
        </div>
        <div class="group4">
          <p class="publicTitle">本周预约</p>
          <p class="pubNumber">{{weekCount.appoTotal}}</p>
          <div class="huaibi">
            <p class="left">
              <span>环比</span>
              <img v-if="weekCount.loopPer > 0 " src="../assets/img/index-up.png">
              <img v-else src="../assets/img/index-down.png">
              <span>{{weekCount.loopPer}}%</span>
            </p>
          </div>
        </div>
        <div class="group5">
          <p class="publicTitle">本月预约</p>
          <p class="pubNumber">{{monthCount.appoTotal}}</p>
          <div class="huaibi">
            <p class="left">
              <span>环比</span>
              <img v-if="monthCount.loopPer > 0 " src="../assets/img/index-up.png">
              <img v-else src="../assets/img/index-down.png">
              <span>{{monthCount.loopPer}}%</span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="charts">
      <div id="leftCharts">
        <v-chart :id="'pieChart'" :data="option1" style="height:100%;"></v-chart>
      </div>
      <div id="rightCharts">
        <v-chart :id="'stackedBar2'" :data="option2" style="width:100%;height: 100%;"></v-chart>
      </div>
    </div>
  </div>
</template>
<script>
import vChart from "./view/chart.vue";
import { getHomeData, orgIndex } from "../api/getData";
export default {
  name: "mechanism",
  components: {
    vChart
  },
  data: function() {
    return {
      busTypeTotalList: [], //业务办理占比
      totalCounts: {
        keepAppoCount: 0, //累计赴约次数
        appoTotal: 0 //累计预约次数
      },
      yesterdayCount: {
        appoTotal: 0, //昨日预约数
        keepAppoCount: 0, //昨日赴约人数
        keepAppoPer: 0 //昨日赴约率
      },
      todayCount: {
        appoTotal: 0, //今日预约数
        keepAppoCount: 0, //今日赴约人数
        keepAppoPer: 0 //今日赴约率
      },
      weekCount: {
        //本周预约
        appoTotal: 0,
        keepAppoCount: 0,
        loopPer: 0
      },
      monthCount: {
        //本月预约
        appoTotal: 0,
        keepAppoCount: 0,
        loopPer: 0
      },
      yearDataList: [], //年度业务办理量
      option1: {
        title: {
          text: "本年业务预约",
          textStyle: {
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          x: "left",
          icon: "square",
          bottom: 0,
          formatter: function(params) {
            // console.log(params)
            if (params.indexOf("\n") == -1) {
              return params;
            } else {
              return (
                "{white|" +
                params.split("\n")[0] +
                "}\n" +
                params.split("\n")[1]
              );
            }
          }
        },
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "总业务量\n"+"30000",
            textAlign: "center",
            fill: "#000",
            fontSize: 20
          }
        },
         color: ["#328EF9", "#04cdad", "#f2ad68","#565ADE",
          "#328EF9",
          "#3ED0B9",
          "#9C6DE2",
          "#FBB730",
          "#FB8830"],
        series: [
          {
            name: "业务预约占比",
            type: "pie",
            stillShowZeroSum:true,
            radius: ["45%", "60%"],
            label: {
              normal: {
                show: "true",
                formatter: "{c|{c}}",
                borderWidth: 30,
                padding: [20, 0],
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center"
                  },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 0.5,
                    height: 1
                  },
                  c: { fontSize: 18, fontWeight: "bold" },
                  per: { color: "#333", fontSize: 13 }
                },
                textStyle: {
                  fontSize: 20,
                  color: "#39CCCC"
                }
              }
            },
            labelLine: {
              normal: {
                show:true,
                length: 20,
                length2: 10,
              }
            },
            data: [
              { value: 335, name: "堆龙德庆区工商局" },
              { value: 310, name: "金珠西路工商局" },
              { value: 234, name: "北京东路工商局" },
              { value: 135, name: "色拉路工商局" },
              { value: 1548, name: "日喀则工商局" },
              { value: 235, name: "桑珠孜区工商局" }
            ]
          }
        ]
      },
      option2: {
        title: {
          text: "网点业务类型统计",
          padding: [5, 0, 0, 0],
          textStyle: {
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
					formatter: function(v){
						console.log(v,'----v---')
						let temp = v[0].name
						v.filter(s => s.value).forEach(s => temp += `<br/>  ${s.marker} ${s.seriesName} ${s.value}`)
						return temp
					}
        },
        legend: {
          bottom: 0,
          formatter: function(params) {
            if (params.indexOf("\n") == -1) {
              return params;
            } else {
              return (
                "{white|" +
                params.split("\n")[0] +
                "}\n" +
                params.split("\n")[1]
              );
            }
          }
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "8%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "网点",
            data: [],
            axisLabel: {
              interval: 0,
              rotate: 30
            }
          }
        ],   
        // dataZoom: [
        //   {
        //     type: "slider",
        //     show: true, //flase直接隐藏图形
        //     xAxisIndex: [0],
        //     handleIcon:
        //       "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
        //     handleSize: "80%",
        //     handleStyle: {
        //       color: "#fff",
        //       shadowBlur: 3,
        //       shadowColor: "rgba(0, 0, 0, 0.6)",
        //       shadowOffsetX: 2,
        //       shadowOffsetY: 2
        //     },
        //     backgroundColor: "rgba(255,255,255,0.2)",
        //     fillerColor: "rgba(255,255,255,0.2)",
        //     borderColor: "#eee",
        //     left: "auto", //滚动条靠左侧的百分比
        //     bottom: 20,
        //     start: 0, //滚动条的起始位置
        //     end: 80 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
        //   }
        // ],
        yAxis: [
          {
            type: "value",
            name: "业务量（次数）",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: "dashed"
              }
            }
          }
        ],
         color: ["#328EF9", "#04cdad", "#f2ad68","#565ADE",
          "#328EF9",
          "#3ED0B9",
          "#9C6DE2",
          "#FBB730",
          "#FB8830"],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 30,
            stack: "预约统计",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: "",
            type: "bar",
            stack: "预约统计",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
          },
          {
            name: "",
            type: "bar",
            stack: "预约统计",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      }
    };
  },
  created: function() {}, // 创建时
  beforeMount: function() {}, // 挂载之前
  mounted: function() {
    orgIndex({}).then(data => {
	  console.log(data.data.data, "首页数据");
	  let record = data.data.data
	  this.totalCounts.keepAppoCount = record.appoTotal.keepAppoCount
	  this.totalCounts.appoTotal = record.appoTotal.appoTotal
	  //今日预约
	  this.todayCount.appoTotal = record.todayCount.appoTotal
	  this.todayCount.keepAppoPer = record.todayCount.keepAppoPer
	  //昨日预约
	   this.yesterdayCount.appoTotal = record.yesterdayCount.appoTotal
	  this.yesterdayCount.keepAppoPer = record.yesterdayCount.keepAppoPer
	  //本周预约
	   this.weekCount.appoTotal = record.weekCount.appoTotal
	  this.weekCount.loopPer = record.weekCount.loopPer
	  //本月预约
	  this.monthCount.appoTotal = record.monthCount.appoTotal
	  this.monthCount.loopPer = record.monthCount.loopPer

	//业务预约占比
	this.option1.graphic.style.text = record.busTypeTotalListCount +"\n" + "总业务量"
	let dataList = [];
	record.busTypeTotalList.forEach(item=>{
			dataList.push({"value":item.appoCount,"name":item.businessTypeName})
	})
  this.option1.series[0].data = dataList;
  console.log(dataList,'数据展示')

	// 网点业务类型统计
	let numMouth = [];
 let  latticeList = []
  record.busTypeLatticeCountList.dataList.forEach(item =>{
    latticeList.push(item.latticeName)

  })
  this.option2.xAxis[0].data = latticeList;
	record.busTypeLatticeCountList.businNames.forEach((item,x) =>{
    let arr = [];
    record.busTypeLatticeCountList.dataList.forEach(itemOne =>{
        arr.push(0)
    })
    numMouth.push({
      name: item,
      type: "bar",
      stack: "预约统计",
      data: arr
    })
  })
  record.busTypeLatticeCountList.dataList.forEach((v,x) =>{
      v.businessTypeArr.map(s=>{
        for(var i=0;i<numMouth.length;i++){
          
          var j=numMouth[i];
          if(j.name==s.bName){
            j.data[x] = s.bTotal
            break;
          }
        }
      })
    })
	this.option2.series = numMouth
	});

	


  }, // 挂载之后
  beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
  updated: function() {}, // 数据更新后,渲染后调用(禁止)
  beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
  destroyed: function() {}, // 实例销毁后调用
  methods: {} // 函数
};
</script>
<style lang='scss'>
.mechanism {
  .group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .group-left {
      width: 34%;
      height: 216px;
      box-shadow: #ccc 4px 4px 10px;
      background: linear-gradient(to right, #00cdac, #56d5c4);
      color: #fff;
      border-radius: 5px;
      .g-l-item {
        padding: 30px 20px 0;
        h2 {
          font-size: 30px;
          margin-top: 10px;
        }
      }
    }
    .group-right {
      width: 64%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      .group2,
      .group3,
      .group4,
      .group5 {
        width: 49%;
        box-shadow: #ccc 4px 4px 10px;
        box-sizing: border-box;
        height: 100px;
        padding: 12px 16px;
        color: #fff;
        border-radius: 5px;
        .prossGroup {
          justify-content: space-between;
          display: flex;
          .progss {
            width: 80%;
          }
          .el-progress-bar {
            margin-right: 0;
            padding-right: 0;
            width: 80%;
          }
          .el-progress-bar__outer {
            /* width: 100%; */
            background-color: #f7ab60;
          }
          .el-progress-bar__inner {
            background-color: #fff;
          }
          .el-progress__text {
            color: #fff;
            font-size: 12px;
          }
          span {
            font-size: 12px;
            color: #fff;
            margin-top: 3px;
          }
        }
        .huaibi {
          display: flex;
          justify-content: space-between;
          color: #fff;
          font-size: 12px;
        }
        .pubNumber {
          text-align: left;
          /* margin-top: 4px; */
          padding: 4px 0;
          color: #fff;
          font-size: 30px;
          font-weight: bold;
        }
        &.group2 {
          background: url(../assets/img/index-1.png) 0 0 no-repeat;
          background-size: 100% 100%;
          margin-bottom: 14px;
        }
        &.group3 {
          background: url(../assets/img/index-2.png) 0 0 no-repeat;
          background-size: 100% 100%;
          margin-bottom: 14px;
          .el-progress-bar__outer {
            background-color: #65c1ff;
          }
        }
        &.group4 {
          background: url(../assets/img/index-3.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
        &.group5 {
          background: url(../assets/img/index-4.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .charts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    #leftCharts {
      width: 34%;
      height: 500px;
      padding: 20px;
      background-color: #fff;
      box-shadow: #ccc 4px 4px 10px;
    }
    #rightCharts {
      width: 64%;
      height: 500px;
      padding: 20px 40px 20px 20px;

      background-color: #fff;
      box-sizing: border-box;
      box-shadow: #ccc 4px 4px 10px;
    }
  }
}
</style>
